<!-- 工程项目 详情 -->
<template>
  <div class="engineeringInfo">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="containerNodeBox" @click="hidePanel">
      <div class="contentBox">
        <div class="leftBox">
          <div class="leftNode">
            <div class="titleIcon">
              <div class="titleName">{{ titleList.pay_type }}</div>
            </div>
            <div class="engineeringTitle">{{ titleList.name }}</div>
          </div>
          <div class="typeContainer">
            <div class="typeDataBox">
              <div class="typeLeftBox">
                <div class="typeTitle">工程类型：</div>
                <span
                  class="typeName"
                  v-for="(item, index) of titleList.work_demand"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <div class="typeRightBox">
                <div class="iconLeft">
                  <img
                    src="./../../../../../public/img/eenginering/followIcon.png"
                    class="followIcon"
                  />
                  <span>{{ titleList.access_count }}</span>
                </div>
                <div
                  id="iconRightz"
                  class="iconRight"
                  :data-clipboard-text="dataClipboardText"
                  @click="onShowz()"
                >
                  <img
                    src="./../../../../../public/img/eenginering/shareIcon.png"
                    class="shareIcon"
                  />
                  <span>分享</span>
                  <div
                    v-show="shares"
                    @click="onShare(dataClipboardText)"
                    class="tipBg"
                  >
                    复制链接
                  </div>
                </div>
              </div>
            </div>
            <div class="nodeListBox">
              <div class="nodeListTitle">
                <div class="itemListNode">
                  <div class="BelongingInfo">
                    <span class="colorTitle">所属工程：</span
                    >{{ titleList.project_name }}
                  </div>
                  <div class="nodeInfo">
                    <span class="colorTitle">施工说明：</span
                    >{{
                      titleList.work_condition
                        ? titleList.work_condition
                        : "暂无"
                    }}
                  </div>
                </div>
                <!-- <div class="itemDrawing">查看设计图纸</div> -->
              </div>
              <div class="addressInfo">
                <span class="colorTitle">施工地点：</span
                >{{ titleList.adcode_city }}
              </div>
            </div>
          </div>
        </div>
        <div class="footerListNode">
          <div class="footerTitleBg">
            <div class="footerTitleName">寻租机械</div>
            <div class="footertitleList">
              <div>机械数量</div>
              <div>预估总工作量</div>
              <div>进场日期</div>
            </div>
          </div>
          <div class="mechanicsList" v-if="detailjsons.length > 0">
            <div
              class="rentMachineeryInfo"
              v-for="(item, i) of detailjsons"
              :key="i"
            >
              <div class="rentInfoList">
                <div class="leftImgBox">
                  <img :src="item.icon_url" class="leftImg" />
                </div>
                <div class="rentInfoRight">
                  <div class="rentInfoRightTitle">
                    {{ item.type_detail_name }}
                  </div>
                  <div class="rentInfoRightTitleContent" v-if="item.norm">
                    <div>机械规格：</div>
                    <div>{{ item.norm }}</div>
                  </div>
                </div>
              </div>
              <div class="rentInfoRightInfo">
                <div class="rightNum">
                  {{ item.number }}{{ item.number_unit }}
                </div>
                <div class="rightWorkload">
                  {{ item.num }}{{ item.unitname }}
                </div>
                <div class="rightTime">{{ item.start_time }}</div>
              </div>
            </div>
          </div>
          <div class="styleHeight" v-if="detailjsons.length <= 0"></div>
        </div>
      </div>
      <div class="rightNode">
        <div class="rightTitleName">
          <div>项目评估</div>
        </div>
        <div class="rightIcon"></div>
        <div class="Progress">
          <div class="ProgressName">履约进度</div>
          <div class="ProgressItem">
            <el-progress
              :percentage="titleList.amoney_cmoney_percent"
              :color="customColor"
            ></el-progress>
          </div>
        </div>
        <div class="phoneStyle"></div>
      </div>
    </div>
    <FooterBar class="footerBar"></FooterBar>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import FooterBar from "../../../../components/FooterBar";
import { getNeeddetail, getNeeddetailFooter } from "./../../../../apis/api.js";
import Clipboard from "clipboard"; //一键复制
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    NavBarHeader,
    FooterBar,
  },
  data() {
    // 这里存放数据
    return {
      dataClipboardText: window.location.href,
      customColor: "#FF855B",
      titleList: {}, //数据列表
      detailjsons: [], //机械列表数据
      shares: false,
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    hidePanel(event) {
      var myPanel = document.getElementById("iconRightz"); // 得到点击出现的节点
      if (myPanel) {
        this.shares = true; // 有改节点的时候，显示，解决第二次点击openAddress按钮出现的bug
        if (!myPanel.contains(event.target)) {
          // 这句是说如果我们点击到了id为myPanel以外的区域，为false
          this.shares = false; // 消失
        }
      }
    },
    onShowz() {
      this.shares = !this.shares;
    },
    onShare() {
      var clipboard = new Clipboard(".iconRight");
      clipboard.on("success", (e) => {
        setTimeout(() => {
          this.$message.success("已复制当前网址");
          this.shares = false;
        }, 500);
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.error("浏览器不支持复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    // 获取数据上半部分
    async getNeeddetail() {
      let data = {
        // order_machine_id:this.$route.query.id
        need_id: this.$route.query.id,
      };
      let res = await getNeeddetail(data);
      if (res.data.result == "1") {
        this.titleList = res.data.body.list;
      }
    },
    // 获取数据下半部分
    async getNeeddetailFooter() {
      let data = {
        // order_machine_id:this.$route.query.id
        need_id: this.$route.query.id,
      };
      let res = await getNeeddetailFooter(data);
      if (res.data.result == "1") {
        this.detailjsons = res.data.body.detailjsons;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNeeddetail();
    this.getNeeddetailFooter();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped lang='scss'>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.containerNodeBox {
  width: 1180px;
  margin: 10px auto 0 auto;
  display: flex;
  padding-bottom: 40px;
}
.titleIcon {
  background: url("./../../../../../public/img/rent/bgIcon.png") no-repeat;
  background-size: 100%, 100%;
  width: 75px;
  height: 26px;
  line-height: 20px;
  text-align: center;
  margin-top: 8px;
}
.leftBox {
  width: 880px;
  height: 286px;
  box-sizing: border-box;
  margin-top: 40px;
  margin-right: 20px;
  background: #fafbfc;
}
.leftNode {
  display: flex;
  padding-top: 20px;
  margin-left: 20px;
  box-sizing: border-box;
}
.titleName {
  font-size: 12px;
  color: #fff;
  margin-left: -6px;
  margin-top: 4px;
}
.engineeringTitle {
  font-size: 26px;
  color: #000;
  font-family: PingFangSC-Regular, PingFang SC;
  margin-left: 10px;
  width: 750px;
  display: flex;
  flex-wrap: wrap;
}
.typeContainer {
  display: flex;
  flex-direction: column;
}
.typeDataBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.typeLeftBox {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.typeTitle {
  font-size: 14px;
  color: #999;
  margin-right: 14px;
}
.typeName {
  background: #fff5f3;
  border-radius: 4px;
  font-size: 12px;
  color: #ff855b;
  padding: 3px 5px 3px 5px;
  margin-right: 10px;
}
.typeRightBox {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.iconLeft {
  display: flex;
  align-items: center;
  margin-right: 40px;
  font-size: 12px;
  color: #999;
}
.iconRight {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  position: relative;
  .tipBg {
    position: absolute;
    bottom: -45px;
    left: -10px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    width: 78px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(213, 213, 213, 0.5);
    z-index: 100;
  }
}
.shareBox {
  width: 70px;
  position: absolute;
  left: -10px;
  bottom: -20px;
}
.followIcon {
  margin-right: 10px;
}
.shareIcon {
  margin-right: 10px;
}
.nodeListBox {
  width: 840px;
  height: 90px;
  background: #f5f7fa;
  border-radius: 4px;
  margin: 20px auto 0 auto;
}
.rightNode {
  width: 279px;
  height: 355px;
  margin-left: 20px;
  border: 1px dashed #dcdfe6;
  margin-top: 40px;
  position: relative;
}
.nodeListTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 20px 0 20px;
}
.itemListNode {
  display: flex;
  align-items: center;
}
.nodeInfo {
  margin-left: 90px;
}
.addressInfo {
  margin-top: 10px;
}
.colorTitle {
  font-size: 16px;
  color: #999;
}
.BelongingInfo {
  font-size: 16px;
  color: #333;
}
.nodeInfo {
  font-size: 14px;
  color: #333;
}
.itemDrawing {
  font-size: 12px;
  color: #ff855b;
  cursor: pointer;
}
.addressInfo {
  font-size: 14px;
  color: #333;
  margin-left: 20px;
}
.footerListNode {
  margin-top: 30px;
}
.footerTitleBg {
  width: 880px;
  height: 40px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #333;
}
.footerTitleName {
  width: 300px;
  padding-left: 20px;
  box-sizing: border-box;
}
.footertitleList {
  width: 580px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.rentMachineeryInfo {
  width: 880px;
  height: 130px;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.rentInfoList {
  width: 356px;
  height: 130px;
  border-right: 1px solid #e7e7e7;
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.leftImgBox {
  width: 90px;
  height: 90px;
  background: #f5f5f5;
  border-radius: 2px;
  position: relative;
}
.leftImg {
  width: 80px;
  height: 66px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.rentInfoRight {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}
.rentInfoRightTitle {
  font-size: 16px;
  color: #333;
}
.rentInfoRightTitleContent {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}
.rentInfoRightInfo {
  width: 700px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.rightNum {
  font-size: 16px;
  color: #ff855b;
  margin-left: 5px;
}
.rightWorkload {
  font-size: 16px;
  color: #999;
  margin-left: 50px;
}
.rightTime {
  font-size: 16px;
  color: #999;
}
.pageinationBox {
  margin-top: 20px;
  text-align: right;
}
.rightTitleName {
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  color: #333;
  font-weight: 14px;
  text-align: center;
}
.rightIcon {
  background: url("./../../../../../public/img/eenginering/yitongguo.png")
    no-repeat;
  background-size: 100%, 100%;
  width: 92px;
  height: 84px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.Progress {
  margin-top: 130px;
}
.ProgressName {
  margin-left: 20px;
  font-size: 12px;
  color: #999;
}
.ProgressItem {
  // text-align: center;
  // width: 200rpx;
  width: 240px;
  .el-progress {
    font-size: 12px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #303133;
    display: flex;
    align-items: center;
  }
  margin: 10px 20px;
}

.phoneStyle {
  margin-top: 20px;
  background: url("./../../../../../public/img/eenginering/phoneImg.png")
    no-repeat;
  height: 115px;
  background-size: 100%, 100%;
}
.bdsharebuttonbox {
  width: 200px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  border: 1px solid #666;
  position: fixed;
  bottom: 36px;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.styleHeight {
  height: 151px;
}
</style>
